<template>
	<div>
		<button @click="flag = !flag">toggle</button>

		<transition name="opt">
			<div class="wrap" v-show="flag">
				<transition name="fade">
					<p class="msg" v-show="flag"></p>
				</transition>
			</div>
		</transition>

	</div>
</template>

<style type="text/css" scoped="true">
	.wrap {
		background: rgba(0,0,0,.5);
		width: 500px;
		height: 400px;
	}
	.opt-enter {
		opacity: 0;
	}
	.opt-enter-active,
	.opt-leave-active {
		transition: opacity ease 0.4s;
	}
	
	.opt-leave-to {
		opacity: 0;
	}
	button {
		margin: 30px;
	}
	
	p {
		height: 400px;
		width: 300px;
		background: green;
	}
	/* 进入时候的初始状态 */
	
	.fade-enter {
		transform: translateX(-300px);
		opacity: 0;
	}
	/* 进入过程中的设置 */
	
	.fade-enter-active {
		transition: all 2s ease;
	}
	/* 离开结束时的状态*/
	
	.fade-leave-to {
		opacity: 0;
		transform: translateX(-300px);
	}
	/*  离开过程中的设置 */
	
	.fade-leave-active {
		transition: all ease 0.4s;
	}
</style>

<script type="text/javascript">
	export default {
		data() {
			return {
				flag: true
			}
		}
	}
</script>

<!--
	过渡不会改变元素的任何设置,只是在过程中,给我们一些幻觉
	使用的方法
	从隐藏到显示的过渡动画设置
	1. 给transition一个name
	2. 设置元素开始显示前的状态name-enter-active
	3. 对元素过渡进行中进行时间,动画效果的设置
	
	
	从显示到隐藏的过渡动画设置
	1. 设置结束后的状态 name-leave-to
	2. 对元素过渡进行中进行时间,动画效果的设置name-leave-acitve
	
	
	
	
-->